import React from 'react';

interface WelcomeProps {
    name?: string;
    children?: React.ReactNode;
    handleMsg?: (event:React.MouseEvent<HTMLButtonElement>,msg:string) => void;
    handleState?: (event:React.MouseEvent<HTMLDivElement>,msg:string) => void;
}

function Welcome(props:WelcomeProps) {
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) :void => {
        console.log('Input value:', event.target.value);
    };

  return (
      <>
          <h1>Welcome to Children Event{props.children}{props.name}</h1>
          <button onClick={(event)=>props.handleMsg?.(event, 'Hello')}>Click me</button>
          <div onClick={(event)=>props.handleState?.(event, 'Hello')}>Click me</div>
          input: <input type="text" onChange={handleChange} />
      </>
  );
}

const ChildrenEvent = () => {
    const handleMsg = (event: React.MouseEvent<HTMLButtonElement>, msg: string) => {
        console.log('Event:', event);
        console.log('Message:', msg);
    };

    return (
        <div>
            <Welcome name={'John'} handleMsg={handleMsg}/>
            <Welcome>
                <h1>Children Event</h1>
            </Welcome>
        </div>
    );
};

export default ChildrenEvent;